<template>
	<view class="followList">
		<div class="null-data" v-if="!elements">
			<img src="/static/img/report_null.png" alt="" @click="toadd">
			<p>请添加随访记录</p>
		</div>
		<div class="h-data" v-if="elements">
			<div class="hd" @click="toadd">
				<img src="/static/img/addreport.png" alt="">
				<p>创建随访记录</p>
			</div>
			<div class="bd">
				<uni-swipe-action :options="options" v-for="(item,index) in elements" :key="index">
					<uni-swipe-action-item :right-options="item.status == 2 ? [] : options" @click="delFolloUp(item.id)" @change="swipeChange($event, index)">
						<navigator class="item" :url="'/pages/followUp/createFollow?id='+item.id+'&status='+item.status">
							<img src="/static/img/report-icon.png" alt="">
							<div class="info">
								<div class="information">
									<p>会&emsp;&emsp;员：{{item.memberNmae}}</p>
									<p>随访时间：{{item.floowDate}}</p>
									<p>随访评价：{{item.evaluate}}</p>
								</div>
								<div class="toSent" v-if="item.status == 0">待发送</div>
								<div class="toEvaluated" v-if="item.status == 1">待评价</div>
								<div class="hasEvaluated" v-if="item.status == 2">已评价</div>
							</div>
							
						</navigator>
					</uni-swipe-action-item>
				</uni-swipe-action>
	
			</div>
		</div>
	</view>
</template>

<script>
	import uSwipeActionItem from "../../components/uni-swipe-action-item/uni-swipe-action-item.vue";
	import uniSwipeAction from "../../components/uni-swipe-action/uni-swipe-action.vue";
	export default {
		data() {
			return {
				elements: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EE2437' // 删除按钮背景  红的
					}
				}],
			}
		},
		components:{
			uSwipeActionItem,
			uniSwipeAction
		},
		onLoad() {
			this.followList()
		},
		watch:{
			$route(v){
				this.followList();
			}
		},
		methods:{
			followList() {
				this.$api.followList().then((res) => {
					if(res.data.StatusCode == '200') {
						this.elements = res.data.Result.elements;
						// console.log(this.elements)
					} 
				})
			},
			// 删除随访记录
			delFolloUp(id) {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除此记录？',
					success: function(res) {
						if (res.confirm) {
							_this.$api.delFollow(id).then((res) => {
								if(res.data.StatusCode == "200") {
									uni.showToast({title:'删除成功',icon:'none'});
									_this.followList();
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
			// 创建随访记录
			toadd() {
				uni.navigateTo({
					url:'./createFollow'
				})
			},
			swipeChange(e, index) {
				// console.log('当前状态：' + open + '，下标：' + index)
				console.log(e)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.followList {
		padding-top: 188upx;
		.null-data {
			img {
				width: 70vw;
				display: block;
				margin: 20vh auto 0;
			}
		
			p {
				font-size: 30upx;
				text-align: center;
				margin-top: 20upx;
			}
		}
		.h-data {
			.hd {
				position: fixed;
				top: 0;
				left: 0;
				display: flex;
				// height: 190upx;
				padding: 57upx 26upx;
				background: #F3FAF7;
				box-shadow: 1upx 4upx 10upx 0upx rgba(134, 211, 181, 0.3);
				color: #3CBE8A;
				align-items: center;
				width: 100%;
				margin-top: 80upx;
				z-index: 100;
				img {
					width: 76upx;
					height: 76upx;
				}
		
				p {
					font-size: 30upx;
					margin-left:41upx;
				}
			}
		
			.bd {
				.item {
					display: flex;
					align-items: center;
					width: 100%;
					img {
						width: 90upx;
						height: 100upx;
						padding: 0 44upx 0 24upx;
					}
		
					.info {
						flex: 1;
						padding: 24upx 0;
						border-bottom: 1px solid #CCCCCC;
						color: #333;
						overflow: hidden;
						display: flex;
						align-items: center;
						.information {
							flex: 1;
							p {
								margin-top: 12upx;
								font-size: 28upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
						.toSent,
						.toEvaluated,
						.hasEvaluated{
							background-color: #38CB97;
							width: 116upx;
							height: 52upx;
							color: #FFFFFF;
							font-size: 28upx;
							line-height: 50upx;
							text-align: center;
							display: block;
							margin: 0 24upx;
							border-radius: 10upx;
						}
						.toEvaluated {
							background-color: #E4A63F;
						}
						.hasEvaluated {
							background-color: #BCBCBC;
						}
					}
					
				}
			}
		}
	}

</style>
